W systemie komputera są zainstalowane liczne czcionki. Możliwe jest, że strona wykorzystuje czcionkę, której nie ma w systemie konkretnego komputera. Przeglądarka podstawia wówczas standardową czcionkę dostępna w systemie, która może wyglądać zupełnie inaczej niż planowana. Tworząc stronę, warto zadbać o to, aby czcionka wyświetlana, była taka sama lub przynajmniej zbliżona do zaplanowanej. CSS grupuje czcionki w/g określonych cech, a więc podobnych od siebie, w grupy nazywane rodzinami(family). Tych rodzin jest pięć:
| nazwa rodziny | opis | przykładowy opis |
|---|---|---|
| serif | czcionki szeryfowe, posiadaja dekorację zakończenia liter | Georgia, Bodoni, New Times Roman |
| sans-serif | bezszyfrowe; proste zakończenia liter | Arial, Verdena, Futura |
| monospace | monotypiczne; stała szerokość znaku | Courier, Courier New |
| cursive | pochylone | Comic Sans MS, Florence |
| fantasy | dekoracyjne | Impact, OldTown |
Istnieje możliwość podania wielkosci czcnionki w jednostkach bezwzględnych:mm,cm,in pt, px... Można także podać jako większa - larger lub mniejszą -smaller.
to ew. pochylenie.Wprowadzamy przez:
.font-style:wartość. Możliwe wartości:
- normal
- italic - pochylona
- oblique - działanie jak italic.
Wariant czcionki pozwala na wybór pomiędzy normalnym wyglądem a Kapitalikami, czyli wyświetlanie wielkich liter w rozmiarze małych liter.
Przykłady:
tekst normalny
Tekst ze stylem
font-variant:small-caps.
Grubość czcionki realizowana w HTML znacznikiem <b>, w CSS posiada dekralację font-weight:wartość. Możliwe wartośći to liczby od 100 do 900 z interwałem = 100 dające coraz grubszy tekst. Innymi wartościami są normal i bold ewentualnie Lighter lub bolder
akapit z pogrubioną i asda
Odstępy między wierszami ustalamy deklaracją line-height:wartość. Wartościami mogą być jednostki procentowe lub bezwzględne (mm, cm, px....). Ten akapit posiada odległości między liniami o wilekości 30px.
Można połączyć wiele atrybutóww jednym wpisie. Wówczas po elemencie font stawiamy dwukropek(:) i wpisujemy wartości oddzielone spacjami w kolejności:
-font-style
-font-variant
-font-weight
-font-size
-line-height
-font-family
.
Zmiana kolejności może skutkować nieprawidłowym odczytem wartości lub pominięciem cechy. Wyjątkiem jest odległość między liniami; wymaga poprzedzenia znakiem(/)
Formatowanie stylem font:italic small-caps bold 40px courier.
kolor red
kolor #66AAFF
kolor #69C
kolor rgb(255,33,170)
kolor rgb(25%,75%,75%)
kolor systemowy Highlight
dekoracja none
dekoracja underline
dekoracja line-through
dekoracja overline
dekoracja blink (tylko Netscape/Mozilla/Firefox i Opera 7)
To jest akapit z transformacją tekstu none...
To jest akapit z transformacją tekstu Capitalize...
To jest akapit z transformacją tekstu UPPERCASE...
To jest akapit z transformacją tekstu lowercase...
wyrównanie left (domyślnie)
wyrównanie left - do lewego marginesu
wyrównanie right
wyrównanie right do prawego marginesu
wyrównanie center(wyśrodkowane)
wyrównanie center - do srodka center
wyrównanie justify - do obu marginesów jednocześnie... wyrównanie justify - do obu marginesów jednocześnie...
wyrównanie justify - do obu marginesów jednocześnie... wyrównanie justify - do obu marginesów jednocześnie...
wyrównanie justify - do obu marginesów jednocześnie... wyrównanie justify - do obu marginesów jednocześnie...
wyrównanie justify - do obu marginesów jednocześnie... wyrównanie justify - do obu marginesów jednocześnie...
To jest akapit, w którego pierwszej linijce wcięcie wynosi 1cm... To jest akapit, w którego pierwszej linijce wcięcie wynosi 1cm... To jest akapit, w którego pierwszej linijce wcięcie wynosi 1cm...
text-shadow: 0.2em 0.2em
text-shadow: 3px 3px 5px red
text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px
To jest akapit, w którym odstępy między wierszami wynoszą 1cm... To jest akapit, w którym odstępy między wierszami wynoszą 1cm... To jest akapit, w którym odstępy między wierszami wynoszą 1cm...To jest akapit, w którym odstępy między wierszami wynoszą 1cm...To jest akapit, w którym odstępy między wierszami wynoszą 1cm...
To jest akapit, w którym odstępy między wyrazami wynoszą 1cm
To jest akapit, w którym odstępy między literami wynoszą 3mm
Tu jest dziesięć spacji: ...ale ponieważ użyto white-space: normal, więc zostaną one zamienione na jedną (domyślnie).
Tu jest dziesięć spacji: ...i ponieważ użyto white-space: pre, więc nie zostaną one zamienione na jedną (powinny być widoczne na ekranie). Dodatkowo wiersz nie zostanie przełamany, aż do momentu napotkania znaku końca linii (klawisz Enter wpisany w edytorze - nie trzeba stosować znacznika
). Tutaj znajduje się przełamanie linii
...a tutaj jest następna linijka rozpoczynająca się tabulatorem.
Tu jest dziesięć spacji: ...ale ponieważ użyto white-space: nowrap, więc zostaną one zamienione na jedną. Natomiast ten wiersz nie powinien być nigdy przełamany... przełamany... przełamany... przełamany... przełamany... przełamany... przełamany... przełamany..., chyba że pojawi się znacznik
...wtedy tekst zostanie przeniesiony do następnej linii.
Tu jest dziesięć spacji: ...i ponieważ użyto white-space: pre-wrap, więc nie zostaną one zamienione na jedną (powinny być widoczne na ekranie). ...a tutaj jest następna linijka rozpoczynająca się tabulatorem. Dodatkowo wiersz zostanie przełamany automatycznie, jeśli nie zmieści się w szerokości ekranu albo po napotkaniu znaku nowej linii (klawisz Enter).
Tu jest dziesięć spacji: ...i ponieważ użyto white-space: pre-line, więc zostaną one zamienione na jedną. Dodatkowo wiersz zostanie przełamany automatycznie, jeśli nie zmieści się w szerokości ekranu albo po napotkaniu znaku nowej linii (klawisz Enter).